import { Component } from '../core/Component.js';

/**
 * 文本输入组件
 */
export class EditText extends Component {
  constructor(props = {}) {
    super(props);
    this.placeholder = props.placeholder || '';
    this.value = props.value || '';
    this.type = props.type || 'text'; // text, password, email, number等
    this.multiline = props.multiline || false; // 是否多行输入
    this.rows = props.rows || 3; // 多行输入的行数
    this.maxLength = props.maxLength || null;
    this.disabled = props.disabled || false;
    this.readonly = props.readonly || false;
    
    // 事件处理函数
    this.onInput = props.onInput || (() => {});
    this.onChange = props.onChange || (() => {});
    this.onFocus = props.onFocus || (() => {});
    this.onBlur = props.onBlur || (() => {});
    
    this.style = props.style || {};
  }

  /**
   * 获取输入值
   * @returns {string} 当前输入值
   */
  getValue() {
    return this.element ? this.element.value : this.value;
  }

  /**
   * 设置输入值
   * @param {string} value 新的输入值
   */
  setValue(value) {
    this.value = value;
    if (this.element) {
      this.element.value = value;
      console.log('EditText组件值已更新为:', value);
    }
  }

  /**
   * 设置占位符
   * @param {string} placeholder 新的占位符
   */
  setPlaceholder(placeholder) {
    this.placeholder = placeholder;
    if (this.element) {
      this.element.placeholder = placeholder;
    }
  }

  /**
   * 设置禁用状态
   * @param {boolean} disabled 是否禁用
   */
  setDisabled(disabled) {
    this.disabled = disabled;
    if (this.element) {
      this.element.disabled = disabled;
      this.applyStyle();
    }
  }

  /**
   * 聚焦到输入框
   */
  focus() {
    if (this.element) {
      this.element.focus();
    }
  }

  /**
   * 重写update方法，避免重新创建DOM元素
   */
  update() {
    if (this.element) {
      this.applyStyle();
    }
  }

  applyStyle() {
    if (!this.element) return;
    
    // 基础样式
    this.element.style.padding = '12px 16px';
    this.element.style.borderRadius = '6px';
    this.element.style.border = '2px solid #ddd';
    this.element.style.fontSize = '16px';
    this.element.style.fontFamily = 'inherit';
    this.element.style.outline = 'none';
    this.element.style.transition = 'all 0.3s ease';
    this.element.style.width = '100%';
    this.element.style.boxSizing = 'border-box';
    
    // 多行输入特殊样式
    if (this.multiline) {
      this.element.style.resize = 'vertical';
      this.element.style.minHeight = '80px';
    }
    
    // 禁用状态样式
    if (this.disabled) {
      this.element.style.opacity = '0.6';
      this.element.style.cursor = 'not-allowed';
    } else {
      this.element.style.opacity = '1';
      this.element.style.cursor = 'text';
    }
    
    // 主题样式
    if (this.theme && this.theme.mode) {
      if (this.theme.mode === 'dark') {
        this.element.style.backgroundColor = '#333';
        this.element.style.color = this.theme.textColor || '#ffffff';
        this.element.style.borderColor = '#555';
        
        // 占位符样式（暗黑模式）
        this.element.style.setProperty('--placeholder-color', '#aaa');
      } else {
        this.element.style.backgroundColor = '#ffffff';
        this.element.style.color = this.theme.textColor || '#333333';
        this.element.style.borderColor = '#ddd';
        
        // 占位符样式（亮色模式）
        this.element.style.setProperty('--placeholder-color', '#999');
      }
    } else {
      // 默认样式
      this.element.style.backgroundColor = '#ffffff';
      this.element.style.color = '#333333';
      this.element.style.borderColor = '#ddd';
      this.element.style.setProperty('--placeholder-color', '#999');
    }
    
    // 聚焦样式
    this.element.onfocus = () => {
      this.element.style.borderColor = this.theme?.primaryColor || '#4285f4';
      this.element.style.boxShadow = `0 0 0 3px ${this.theme?.primaryColor || '#4285f4'}33`;
    };
    
    this.element.onblur = () => {
      this.element.style.borderColor = this.theme?.mode === 'dark' ? '#555' : '#ddd';
      this.element.style.boxShadow = 'none';
    };
    
    // 自定义样式（覆盖主题样式）
    for (const [key, value] of Object.entries(this.style)) {
      this.element.style[key] = value;
    }
    
    // 添加占位符样式
    const style = document.createElement('style');
    style.textContent = `
      input::placeholder, textarea::placeholder {
        color: var(--placeholder-color, #999);
        opacity: 1;
      }
    `;
    if (!document.head.querySelector('style[data-edittext-placeholder]')) {
      style.setAttribute('data-edittext-placeholder', 'true');
      document.head.appendChild(style);
    }
  }

  render() {
    // 根据是否多行创建不同的元素
    if (this.multiline) {
      this.element = document.createElement('textarea');
      this.element.rows = this.rows;
    } else {
      this.element = document.createElement('input');
      this.element.type = this.type;
    }
    
    // 设置基本属性
    this.element.placeholder = this.placeholder;
    this.element.value = this.value;
    this.element.disabled = this.disabled;
    this.element.readOnly = this.readonly;
    
    if (this.maxLength) {
      this.element.maxLength = this.maxLength;
    }
    
    // 绑定事件
    this.element.addEventListener('input', (event) => {
      this.value = event.target.value;
      if (this.onInput) {
        this.onInput.call(this, event, this.value);
      }
    });
    
    this.element.addEventListener('change', (event) => {
      if (this.onChange) {
        this.onChange.call(this, event, this.value);
      }
    });
    
    this.element.addEventListener('focus', (event) => {
      if (this.onFocus) {
        this.onFocus.call(this, event);
      }
    });
    
    this.element.addEventListener('blur', (event) => {
      if (this.onBlur) {
        this.onBlur.call(this, event);
      }
    });
    
    this.applyStyle();
    return this.element;
  }
} 